<template>
  <div class="container">
    <el-tabs v-model="activeTab" class="custom-tabs">
      <!-- 链接扫描页 -->
      <el-tab-pane label="链接扫描" name="scan">
        <scan-interface />
      </el-tab-pane>

      <!-- 扫描记录页 -->
      <el-tab-pane label="扫描记录" name="history">
        <scan-history :records="scanRecords" />
      </el-tab-pane>

      <!-- 扫描策略页 -->
      <el-tab-pane label="扫描策略" name="strategy">
        <strategy-manager />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref } from 'vue'
import ScanInterface from './scan/scanInterface.vue'
import ScanHistory from './scan/scanHistory.vue'
import StrategyManager from './scan/strategyManager.vue'

export default {
  components: {
    ScanInterface,
    ScanHistory,
    StrategyManager
  },
  setup() {
    const activeTab = ref('scan')
    const scanRecords = ref([])

    return {
      activeTab,
      scanRecords
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.custom-tabs {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

:deep(.el-tabs__header) {
  margin: 0;
  padding: 0 20px;
}

:deep(.el-tabs__item) {
  font-size: 14px;
  padding: 0 20px;
}
</style>